<template>
  <div class="app-container">
    <el-row :gutter="20" class="app-row">
      <!-- 左侧 -->
      <div class="col-left">
        <!-- <el-input
          v-model="filterText"
          placeholder="请输入关键字"
          suffix-icon="el-icon-search"
          clearable
          maxlength="20"
          style="width: 210px; margin-bottom: 10px"
        /> -->
        <!-- <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start"> -->
        <el-tree
          v-if="isShow"
          ref="tree"
          :data="treeData"
          :props="defaultProps"
          :expand-on-click-node="false"
          node-key="value"
          :default-expanded-keys="expandedKeys"
          :current-node-key="currentKey"
          highlight-current
          :filter-node-method="filterNode"
          @node-click="handleNodeClick"
        >
          <!-- 文字超出的时候，显示提示信息 -->
          <template #default="{ node }">
            <span class="custom-tree-node">
              <el-tooltip :content="node.label" placement="top" :disabled="node.label.length < 13">
                <span>{{ node.label }}</span>
              </el-tooltip>
            </span>
          </template>
        </el-tree>
        <!-- </el-tooltip> -->
      </div>
      <!-- 右侧主题 -->
      <div class="col-right">
        <!-- 搜索框 -->
        <hK-searchform
          :data="searchData"
          :field-list="fieldList"
          :list-type-info="dictList"
          @handleSearch="handleQuery"
          @handleReset="resetQuery"
          @handleEvent="handleEvent"
        />
        <div class="font">基线状态</div>
        <el-row>
          <!-- v-for="(item, index) in rows" -->
          <el-col
            class="text-overflow"
            style="margin-bottom: 20px !important"
            :span="8"
          >
            <span class="lable">启用基线学习:</span>
            <el-switch
              v-model="status"
              :active-value="1"
              :inactive-value="0"
              @change="handleChangeStatus()"
            />
          </el-col>
        </el-row>
        <div class="font">基线基础信息</div>
        <!-- 按钮组 -->
        <el-row>
          <!-- v-for="(item, index) in rows" -->
          <el-col
            class="text-overflow"
            style="margin-bottom: 20px !important"
            :span="8"
          >
            <!-- <span class="lable">{{ item.label }}:</span> -->
            <!-- <span class="field"> {{ formData[i.field] }}</span> -->
            <!-- <span class="field"> {{ item.field }}</span> -->
            <span class="lable">基线名称:</span>
            <span class="field">{{ baseData.baselineName }}</span>
          </el-col>
          <el-col
            class="text-overflow"
            style="margin-bottom: 20px !important"
            :span="8"
          >
            <span class="lable">执行周期:</span>
            <span class="field"> {{ baseData.desc }}</span>
          </el-col>
          <el-col
            class="text-overflow"
            style="margin-bottom: 20px !important"
            :span="8"
          >
            <span class="lable">默认值:</span>
            <span v-show="currentDefault==0" class="field">{{ baseData.threshold?baseData.threshold:'-' }}</span>
            <span v-show="currentDefault==1" class="field">{{ baseData.startTime }}-{{ baseData.endTime }}</span>
            <el-button v-show="currentDefault==2" :disabled="defatleTableList && defatleTableList.length==0" type="text" @click="handleDetails('default')">列表详情</el-button>

          </el-col>
          <el-col
            class="text-overflow"
            style="margin-bottom: 20px !important"
            :span="8"
          >
            <span class="lable">最后生成时间:</span>
            <span class="field"> {{ baseData.lastExecTime }}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-button type="primary" size="mini" @click="handleConfig()">配置</el-button>
        </el-row>
        <div class="font" style="margin-top: 30px; margin-bottom: 0px">基线配置详情</div>
        <!-- 表格 -->
        <hk-table
          :table-columns="tableTitle"
          :table-data="tableList"
          :show-index="true"
          :total="total"
          :query-params="queryParams"
          :table-height="80"
          @handleSelectionChange="handleSelectionChange"
          @changePage="getDataList(currentTreeObj.baselineType, currentTreeObj.model)"
        >
          <!-- 基线值 threshold -->
          <template #threshold="scope">
            <span v-if="scope.row.threshold">{{ scope.row.threshold }}</span>
            <span v-else-if="scope.row.startTime">{{ scope.row.startTime }}-{{ scope.row.endTime }}</span>
            <span v-else-if="scope.row.whitelists" style="cursor:pointer;color:#6f8bf2;" @click="handleDetails('table',scope.row)">列表详情</span>
            <span v-else>-</span>
          </template>
        </hk-table>
      </div>
    </el-row>
    <config ref="configRef" @handleSubmit="handleSubmit" />
    <detailsDialog
      ref="detailsRef"
      :title="title"
    />
  </div>
</template>

<script>
import { querygroupList, numList, timeList, whiteList, status, numDefault, timeRangesDefault, whitelistsDefault, detailList } from '@/api/icp/baseline'
import HkTable from '@/components/Hk-Table'
import HKSearchform from '@/components/HkSearchform'
import config from './components/config.vue'
import detailsDialog from './components/detailsDialog.vue'
export default {
  components: {
    HkTable,
    HKSearchform,
    config,
    detailsDialog
  },
  data() {
    return {
      isShow:false,
      expandedKeys: ['szjx'],
      currentKey:'szjx',
      status: undefined,
      //  树结构
      filterText: '',
      treeData: [
        {
          value: 'szjx',
          name: '数值类基线',
          showchild: true,
          showCheckbox: false,
          children: []
        },
        {
          value: 'fwjx',
          name: '范围类基线',
          // 控制图标
          showchild: true,
          children: []
        },
        {
          value: 'lbjx',
          name: '列表类基线',
          // 控制图标
          showchild: true,
          children: []
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'name',
        value: 'baselineType'
      },
      // 搜索框
      searchData: {},
      fieldList: [
        {
          label: '关键字',
          type: 'input',
          field: 'keyword',
          placeholder: '请输入IP名称',
          maxlength: 20
        }
      ],
      dictList: {
        deptList: []
      },
      baseList: [
      ],
      // 表格
      tableTitle: [
        { label: '资产IP', param: 'equipmentIp' },
        { label: '资产名称', param: 'equipmentName' },
        { label: '负责人', param: 'equipmentUser' },
        { label: '责任部门', param: 'equipmentOrg' },
        { label: '基线值', param: 'threshold', type: 'slot' }
        // { label: '操作', param: 'operate', type: 'slot', width: '160px' }
      ],
      tableList: [
        {
          name: '192.168.101.1',
          rank: 'xxxx',
          status: '3',
          date: 'xxxxx',
          time: 'xxxxx'
        }
      ],
      queryParams: {
        current: 1,
        size: 10
      },

      // 基线基础信息
      baseData: {
        lastExecTime: '',
        baselineName: '',
        desc: ''
      },
      loading: false,
      // 选中的id值们
      ids: [],
      // 非多个禁用
      // multiple: true,
      // 弹框的标题
      title: '',
      // 分页总条数
      total: 0,
      //  默认值取值状态
      currentDefault: null,
      // 白名单列表详情
      defatleTableList: [],
      //  当前选中树的值
      currentTreeObj: {},
      //  弹窗回显值
      cronObject: {}

    }
  },
  watch: {
    // 根据文本框监听modle，数变化
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  mounted() {
    this.getDeptTree()
    // this.getDataList()
  },
  methods: {
    //  查询列表
    getDataList(type, model) {
      this.currentDefault = null
      detailList(type).then(res => {
        this.cronObject = res?.cronObject
        this.baseData.baselineName = res.baselineName
        this.baseData.lastExecTime = res.lastExecTime ? res.lastExecTime : '-'
        this.baseData.desc = res?.cronObject?.desc
        this.baseData.params = res?.params
        this.status = res.status
      })
      switch (model) {
        case 'threshold':
          numList(type, { ...this.queryParams, ...this.searchData }).then((res) => {
            this.tableList = res.list
            this.total = res.total
            this.loading = false
          })
          numDefault(type).then((res) => {
            this.$nextTick(() => {
              this.currentDefault = 0
              this.baseData.threshold = res?.threshold
            })
          })
          break
        case 'time_range':
          timeList(type, { ...this.queryParams, ...this.searchData }).then((res) => {
            this.tableList = res.list
            this.total = res.total
            this.loading = false
          })
          timeRangesDefault(type).then((res) => {
            this.baseData.endTime = res?.endTime ? res.endTime : ''
            this.baseData.startTime = res?.startTime ? res.startTime : ''
            this.currentDefault = 1
          })
          break
        case 'whitelist':
          whiteList(type, { ...this.queryParams, ...this.searchData }).then((res) => {
            this.tableList.threshold = res.list.whitelists
            this.tableList = res.list
            this.total = res.total
            this.loading = false
          })
          whitelistsDefault(type).then((res) => {
            this.currentDefault = 2
            this.baseData.defatleTableList = res?.whitelists
            this.defatleTableList = res?.whitelists
          })
          break
      }
      this.loading = true
    },
    // 树查询
    getDeptTree(val) {
      querygroupList().then((res) => {
        this.treeData[0].children = res.threshold.map((item) => {
          return {
            baselineType: item.baselineType,
            value: item.baselineType,
            name: item.baselineName,
            model: item.model,
            lastExecTime: item.lastExecTime,
            baselineName: item.baselineName,
            status: item.status,
            desc: item.cronObject.desc,
          }
        })
        this.treeData[1].children = res.time_range.map((item) => {
          return {
            baselineType: item.baselineType,
            name: item.baselineName,
            model: item.model,
            lastExecTime: item.lastExecTime,
            baselineName: item.baselineName,
            desc: item.cronObject.desc
          }
        })
        this.treeData[2].children = res.whitelist.map((item) => {
          return {
            baselineType: item.baselineType,
            name: item.baselineName,
            model: item.model,
            lastExecTime: item.lastExecTime,
            baselineName: item.baselineName,
            desc: item.cronObject.desc
          }
        })
        this.currentKey=this.treeData[0].children[0].baselineType;
        const { baselineType, model } = this.treeData[0].children[0]
        this.currentTreeObj = {
          baselineType, model
        }
        this.isShow=true;
        this.getDataList(baselineType, model)
      })
    },
    // 树点击节点筛选
    handleNodeClick(data) {
      if (data.value == 'szjx' || data.value == 'fwjx' || data.value == 'lbjx') return false
      const { baselineType, model } = data
      this.type = baselineType
      this.queryParams.current = 1
      this.currentTreeObj = data
      this.getDataList(baselineType, model)
    },
    // 修改状态
    // status
    handleChangeStatus() {
      const { baselineType, model } = this.currentTreeObj
      status(baselineType, { status: this.status }).then((res) => {
        this.$message.success(res)
        this.getDataList(baselineType, model)
      })
    },
    // 多选框选中数据   控制批量
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id)
      this.multiple = !selection.length
    },
    // 树搜索
    filterNode(value, data) {
      // if (!value) return true
      // return data.name.indexOf(value) !== -1
    },

    // 搜索按钮
    handleQuery() {
      this.queryParams.current = 1
      const { baselineType, model } = this.currentTreeObj
      this.getDataList(baselineType, model)
    },
    // 搜索框变化
    handleEvent(val) {
      const field = val.field
      const value = val.value
      this.queryParams = {
        ...this.queryParams,
        ...{
          [field]: value
        }
      }
    },
    // 重置按钮
    resetQuery() {
      this.queryParams = {}
      this.queryParams.current = 1
      this.queryParams.size = 10
      const { baselineType, model } = this.currentTreeObj
      this.getDataList(baselineType, model)
    },
    // 配置
    handleConfig() {
      const { baselineType, model } = this.currentTreeObj
      this.$refs.configRef.show(baselineType, model, this.cronObject, this.baseData)
    },
    // 列表详情
    handleDetails(type, row) {
      if (type == 'default') {
        this.title = '基线默认值列表'
        this.$refs.detailsRef.show(this.defatleTableList)
      } else {
        this.title = '基线学习值列表'
        this.$refs.detailsRef.show(row.whitelists)
      }
    },
    //  保存成功回调
    handleSubmit() {
      const { baselineType, model } = this.currentTreeObj
      this.getDataList(baselineType, model)
    }
  }
}
</script>
<style lang="scss" scoped>
#app.dark-theme{
  .font,.lable,.field{
    color:#fff;
  }
}
::v-deep .targetTable .el-table{
  overflow:hidden !important;
}
.app-container {
  padding: 0px !important;
  height: 100%;
  .el-tooltip{
    font-size: 14px;
  }
  .app-row {
    width: 100%;
    height: 100%;
    margin: 0 !important;
    display: flex;
    .col-left {
      height: 100%;
      display: flex;
      flex-direction: column;
      width: 300px;
      padding: 20px;
      overflow: auto;
      border-right: 1px solid rgba(0, 0, 0, 0.08);
      flex-shrink: 0;
      // 当树结构超出时显示省略号
      .custom-tree-node {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    .col-right {
      padding: 20px;
      flex: 1;
      height: 100%;
      display: flex;
      flex-direction: column;
      overflow: auto;
      .font {
        font-size: 16px;
        color: rgba(0, 0, 0, 0.85);
        font-weight: 600;
        margin-top: 10px;
        margin-bottom: 30px;
      }
      .text-overflow {
        overflow: hidden; //溢出隐藏
        white-space: nowrap; //禁止换行
        text-overflow: ellipsis; //...
        .lable {
          font-size: 14px;
          color: #606266;
          display: inline-block;
          width: 100px;
        }
        .field {
          font-size: 14px;
          color: #8c8c8c;
        }
      }
    }
  }
}

::v-deep {
  .content[data-v-307320bc] {
    margin-bottom: 0px !important;
  }
  // 去掉表格里多出来的横线
  .el-table__fixed {
    width: 0;
  }
  // 树形文本超出显示省略号
  .el-tree-node__label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
</style>
